// 底部
const TodoFooter = ({ list, type, setType, clearCompleted }) => {
  const leftList = list.filter((item) => item.isDone === false).length
  const typeList = ['all', 'active', 'completed']
  return (
    <footer className="footer">
      <span className="todo-count">
        剩余<strong>{leftList}</strong>
      </span>
      <ul className="filters">
        {typeList.map((item) => {
          return (
            <li key={item}>
              <a
                className={item === type ? 'selected' : ''}
                href="#/"
                onClick={() => {
                  setType(item)
                }}
              >
                {item}
              </a>
            </li>
          )
        })}
      </ul>
      <button className="clear-completed" onClick={clearCompleted}>
        清除已完成
      </button>
    </footer>
  )
}

export default TodoFooter
